<template>
    <div class="h100 ltree-layout">
        <aside v-show="!hideLeft">
            <slot name="treeHead"></slot>
            <org-mark ref="OrgMark"
                      :isChangeTagBtn="switchOrg"
                      :onlyTagOrg="true"
                      :selectedRoot="selectedRoot"
                      :highlightCurrent="true"
                      :search="true"
                      :labelIdList="orgTags"
                      :rootLabelIds="dependOrgTags"
                      :bizAppId="$x.tokenUtil.appId"
                      :rootPermission="rootPermission"
                      @nodeClick="onNodeClick"
                      @changetag="changeOrg"
                      @rootLoaded="onRootLoaded"
                      @subNodesLoaded="onSubNodesLoaded"
            ></org-mark>

            <org-tree-dialog ref="org" :singleCheck="true"
                             :searchText="dependOrgTagName"
                             :dialogTitle="dependOrgTagName"
                             :isRootDisabled="true"
                             :bizAppId="$x.tokenUtil.appId" :labelIdList="dependOrgTags"></org-tree-dialog>
        </aside>

        <slot v-if="showRightList"></slot>
        <empty-org v-else :msgs="(fgTexts.noOrgMsg || '暂无组织~|请先在【组织架构】添加组织').split('|')">
        </empty-org>
        <component v-if="showComponent" :is="componentName" :isDistrict="isDistrict" :orgId="orgId" :orgTag="orgTag" @on-back="closeComponent"></component>
    </div>
</template>

<script>
import OrgMark from 'party_fe_component/src/components/tree/orgTree/markOrg.vue'
import { OrgTreeDialog } from 'party_fe_component'
import EmptyOrg from './empty-org';

export default {
    mixins: [require('../common/orgTagMixin').default],
    props: {
        orgId: String,
        orgTag: Number,
        isDistrict: {
            type: Boolean,
            default: false
        },
        showComponent: Boolean,
        componentName: String,
        orgTags: Array, // 当前组织的标签，即展开子节点的标签
        dependOrgTags: Array, // 依赖的组织标签，即切换按钮所用的组织标签
        fgTexts: Object, // 文案
        switchOrg: Boolean, // 是否显示切换
        selectedRoot: Boolean, // 根节点是否可选中
        hideLeft: Boolean,
        rootPermission: Boolean
    },
    data() {
        return {
            current: {},
            hasRootNode: true,
            hasSubNodes: true,
        };
    },
    methods: {
        closeComponent () {
            this.$emit('closeComponent');
        },
        onRootLoaded(nodeList) {
            this.$emit('rootChanged', nodeList[0])
            this.hasRootNode = !!nodeList[0]
        },
        onSubNodesLoaded(parentNode, subDatas) {
            // 根目录下没有组织的，提示noOrgMsg
            // noOrgMsg根据文案来配置
            if (parentNode && parentNode.level === 1) {
                this.hasSubNodes = !!subDatas[0]
                //this.$x.alert(this.fgTexts.noOrgMsg)
            }
        },
        changeOrg() {
            this.$refs.org.showOrgDialog().then(res => {
                let rootData = res[0]
                this.current = {
                    selectedRoot: this.selectedRoot,
                    id: rootData.id,
                    name: rootData.name,
                    isOrg: true,
                    tagType: 1,
                    permission: rootData.permission,
                    childNodes: null
                }
                this.$emit('rootChanged', rootData)
                this.$refs.OrgMark.reloadTree(this.current)
            }).catch(err => {

            })
        },
        onNodeClick(nodeData, node) {
            this.$emit('nodeClick', nodeData)
        },
    },
    computed: {
        tree() {
            return this.$refs.OrgMark
        },
        dependOrgTagName() {
            var tagId = this.dependOrgTags && this.dependOrgTags[0]
            return this.fgTagNames[tagId] || '组织'
        },
        showRightList() {
            if (this.selectedRoot) {
                return this.hasRootNode
            } else {
                return this.hasRootNode && this.hasSubNodes
            }
        }
    },
    components: { EmptyOrg, OrgMark, OrgTreeDialog }
}
</script>

<style scoped lang="scss">
    @import "../../css/defines";

    .ltree-layout {
        display: flex;
        //padding: 30px 0;

        > aside {
            width: 210px;
            flex: 0 0 auto;
            /*margin-right: 40px;*/
            background: #F9FAFA;
            border-right: 1px solid #EAEAEA;
            display: flex;
            flex-flow: column;

            /deep/ .el-tree {
                background: transparent;
                flex: 1 0 auto;
            }

            + * {
                width: 100%;
            }
        }
    }
</style>
